<!--  -->
<template>
    <div class='areaMain'>
        <el-button type="primary" style="margin:10px 0px" v-if="!disabled" @click="addRow">新增</el-button>
        <el-table :data="form.model.areaList">
            <el-table-column prop="areaCode" label="商品地区" :key="index">
                <template #default="scope">
                    <el-cascader :placeholder="scope.row.areaName" style="width: 100%" ref="cascaderAddr2"
                        :disabled="disabled" :props="CascaderProps" v-model="scope.row.areaCode" :options="options"
                        @change="($event) => handleAreaChange($event, scope.row)" clearable />
                </template>
            </el-table-column>
            <el-table-column prop="control" label="操作" width="180" v-if="!disabled">
                <template #default="scope">
                    <el-button type="text" @click="onDelClick(scope.$index)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import SalesApi from '@/api/sales'
import { useCascaderAreaData } from '../../../../utils/area';
import { placeholderSign } from 'element-plus/es/components/table-v2/src/private.mjs';
export default {
    name: 'AreaSet',
    props: {},
    components: {},
    data() {
        return {
            CascaderProps: {
                value: 'id',
                label: 'name',
            },
            tableData: [],
            options: [],
            areaData: useCascaderAreaData(),
            disabled: false
        };
    },
    inject: ['form'],
    computed: {},
    watch: {},
    methods: {
        handleAreaChange(value, row) {
            this.$nextTick(() => {
                var reg = new RegExp(' / ', "g")
                row.areaName = this.$refs['cascaderAddr2'].presentText.replace(reg, ',')
                row['areaCode'] = value;
                console.log(JSON.stringify(row), 'value')
                this.form = JSON.parse(JSON.stringify(this.form))
            })


        },
        addRow() {
            this.form.model.areaList.push({
                areaName: '',
                areaCode: ''
            })
        },
        onDelClick(index) {
            this.form.model.areaList
                .splice(index, 1);
        }
    },
    created() {
        this.disabled = this.$route.query.scene === 'view'
        // 请求数据
        SalesApi.regionLists().then(res => {
            const { code, data } = res;
            this.options = data
        })
    },
    mounted() {

    },
}
</script>
<style scoped>
/deep/::-webkit-input-placeholder {
    color: #333 !important;
}
</style>